<template>
    <div class="bigbox">
        <div class="minbox">
            <div class="let">
                <el-image style="width: 500px; height: 500px" :src="imglogin" :fit="fit" />
            </div>
            <div class="rig">
                <div>
                    <p style="width: 100% ; text-align: center; font-size: large;">后台管理系统</p>
                    <br />
                    <br />
                    <br />
                    <el-form :model="formInline" label-width="60px" class="demo-form-inline" :rules="rules"
                        ref="ruleFormRef">
                        <el-form-item label="用户" prop="name">
                            <el-input v-model="formInline.name" />
                        </el-form-item>
                        <el-form-item label="密码" prop="pass">
                            <el-input v-model="formInline.pass" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit(ruleFormRef)">登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import imglogin from '../../img/tu_login.png'
import { ElMessage } from 'element-plus'
import { defineProps, onMounted, ref, computed, reactive } from 'vue';
import { gettables, gettablebm, changelist, addlist, logining, } from '../../sevce/user'
import { useRouter } from 'vue-router';
let router = useRouter()
const formInline = reactive({
    name: '',
    pass: '',
})
//表单校验
const ruleFormRef = ref()
const rules = reactive({
    name: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
        },
    ],
    pass: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
    ],
})

const onSubmit = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            // console.log('submit!')
            logining(formInline).then((res) => {
                if (res.data == 0) {
                    ElMessage.error('登录失败')
                } else if (res.data != null) {
                    if (res.data.position == 2) {
                        localStorage.setItem('userinfo', JSON.stringify(res.data));
                        ElMessage({
                            message: '登录成功',
                            type: 'success',
                        })
                        router.push("/home")
                    } else {
                        ElMessage.error('没有权限')
                    }


                }
            }).catch(() => {
                ElMessage.error('出错了，请联系管理员')
            })
        } else {
            ElMessage.error('信息填写不完整')
        }
    })
}
</script>

<style scoped>
.bigbox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.minbox {
    width: 1000px;
    height: 500px;
    display: flex;
}

.let {
    width: 500px;
    height: 500px;

}

.rig {
    width: 500px;
    height: 500px;

    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}
</style>